<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div  id="app">
        <input type="text" v-model="a">
        <button v-on:click="send()">tijiao</button>

        <ul>
            <li>todo</li>
            <!-- <li v-for="(item, index) in list" :key="index" v-on:click="getOut(index)">{{item}}</li> -->
            <todo-item v-bind:content="item" v-for="(item, index) in list" :key="index"></todo-item>
            <!-- <li>2</li> -->
        </ul>
        <ul>
            <li>doneItem</li>
            <!-- <done-item v-bind:done="item" v-for="(item, index) in doneList" :key="index"></done-item> -->
        </ul>
    </div>
    
</body>
<script>
    // 添加一个全局的component
    // Vue.component('TodoItem',
    //     {
    //         props:['content'],
    //         template:" <li>{{content}}</li> "
    //     }
    // )
// 变成一个局部的component
    var TodoItem={
        name:'todo-item',
        props:['content'],
        template:" <li>{{content}}</li> "
    }
    var DoneItem = {
        props:['done'],
        template:"<li>{{done}}</li>"
    }

    // 初始化一个作用域
    var app = new Vue(
        {
            el:"#app",
            components:{
                'todo-item':TodoItem,
                DoneItem:DoneItem
            },
            data:{
                list:[],
                doneList:[],
                a:''
            },
            methods:{
                send:function(){
                    this.list.push(this.a)
                    this.a='' 
                },
                getOut:function(index){
                    console.log(index);
                    this.doneList.push(this.list[index])
                    this.list.splice(index,1)
                    console.log(this.doneList);
                    
                }
            }
        }
    )
   
</script>
</html>